<template>
    <el-card>
        <template #header>
            <h2>管理员列表</h2>
        </template>
        <el-table :data="tableData" border>
            <el-table-column label="编号" prop="adminId"></el-table-column>
            <el-table-column label="姓名" prop="username"></el-table-column>
            <el-table-column label="权限" prop="role"></el-table-column>
            <el-table-column label="状态" prop="isDeleted"></el-table-column>
        </el-table>
        <el-pagination
			style="margin-top: 20px;"
			background
			v-model:current-page="params.pageNo"
			v-model:page-size="params.pageSize"
			:total="pageTotal"
			@current-change="getTableData"></el-pagination>
    </el-card>
</template>
  
<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
const tableData = ref([]);
const pageTotal = ref(0);        // 总数据量
const params = reactive(
    {
        pageNo:1,
        pageSize:10,
    }
)

function getTableData () {
      axios.request({
          url: 'http://127.0.0.1:8080/admin/list',
          method: 'get',
          params:params
      }).then(response => {
          
          // 正确获取分页数据
          tableData.value = response.data.records; // 当前页记录
          pageTotal.value = response.data.total;    // 总记录数
          console.dir(response);
      }).catch(error => {
          console.dir('失败了');
          console.dir(error);
      });
  }

onMounted(() => {
    getTableData();
});
  
</script>
  
<style scoped>
</style>